<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
  <title>获取并展示图片</title>
</head>

<body>
  <button onclick="getImageUrl()">获取图片</button>
  <img id="image" alt="加载中" /><br>
  <button onclick="getTableData()">获取表格</button>
  <table id="dataTable">
    <thead>
      <tr>
        <th>列 1 标题</th>
        <th>列 2 标题</th>
        <!-- 根据实际列添加更多标题 -->
      </tr>
    </thead>
    <tbody id="tableBody"></tbody>
  </table>

  <button onclick="redirectWithUsername()">跳转并携带用户名</button>

  <script>
        //获取图片url后是处理办法
        function getImageUrl() {
      axios.get('http://your_backend_url')
     .then(response => {
        document.getElementById('image').src = response.data;
      })
     .catch(error => {
        console.error('获取图片 URL 时出错:', error);
      });
    }


    function getTableData() {
      axios.get('http://your_django_backend_url/your_table_data_endpoint/')
      .then(response => {
          const data = response.data;
          const tableBody = document.getElementById('tableBody');
          tableBody.innerHTML = '';
          data.forEach(row => {
            const newRow = document.createElement('tr');
            row.forEach(cell => {
              const newCell = document.createElement('td');
              newCell.innerHTML = cell;
              newRow.appendChild(newCell);
            });
            tableBody.appendChild(newRow);
          });
        })
      .catch(error => {
          console.error('获取数据时出错:', error);
        });
    }

    function redirectWithUsername() {
      // 假设用户名存储在变量 username 中
      var username = "JohnDoe";
      var url = "https://v6n2v2lt-3000.inc1.devtunnels.ms/login.html?" + "username=" + username;
      window.location.href = url;
    }

    
  </script>
</body>

</html>